<!-- Docs styles -->
import { Story, Canvas, Preview, ArgsTable   } from '@storybook/addon-docs';
import image1 from '../../stories/assets/tooltip/01_Descriptor_Variaciones_BasicoIcono.png';
import image2 from '../../stories/assets/tooltip/02_Descriptor_Variaciones_Definicion.png';
import image3 from '../../stories/assets/tooltip/03_Tooltip_Variaciones_DescriptorInteractivo.png';
import image4 from '../../stories/assets/tooltip/04_Descriptor_Anatomia_BasicoIcono.png';
import image5 from '../../stories/assets/tooltip/05_Descriptor_Anatomia_Definicion.png';
import image6 from '../../stories/assets/tooltip/06_Tooltip_Anatomia_DescriptorInteractivo.png';
import image7 from '../../stories/assets/tooltip/07_Decriptor_Posicion_EncimaInicio.png';
import image8 from '../../stories/assets/tooltip/08_Descriptor_Posicion_EncimaCentro.png';
import image9 from '../../stories/assets/tooltip/09_Descriptor_Posicion_EncimaFinal.png';
import image10 from '../../stories/assets/tooltip/10_Descriptor_Posicion_CentroIzquierda.png';
import image11 from '../../stories/assets/tooltip/11_Descriptor_Posicion_CentroDerecha.png';
import image12 from '../../stories/assets/tooltip/12_Descriptor_Posicion_DebajoInicio.png';
import image13 from '../../stories/assets/tooltip/13_Descriptor_Posicion_DebajoCentro.png';
import image14 from '../../stories/assets/tooltip/14_Descriptor_Posicion_DebajoFinal.png';
import image15 from '../../stories/assets/tooltip/tag.png';


<style>
  {`
    .sbdocs-table tr * {
      text-align: center;
      font-weight: bold;
    }

    img {
      display: block;
      margin: 0 auto;
    }

    table {
      margin: 0 auto !important;
    }
  `}
</style>

<img src={image15} width="150"/>


# Descriptor emergente / Tooltip

El descriptor emergente es un mensaje que muestra información adicional de un elemento como resultado de clicar en el mismo, pasar por encima o recibir el foco. La información debe ser contextual, útil y no esencial.


### Variaciones

Hay distintas formas de proveer información contextual, y por esta razón hay distintos tipos según el contenido.

| **Descriptor básico** (de icono)   | **Descriptor de definición**   | **Descriptor interactivo**   |
| :------------------------------------------------------------: | :------------------------------------------------------------: |:--------------------: |
| <br/><img src={image1} width="150"/><br/>                    | <br/><img src={image2} width="200"/><br/>       | <br/><img src={image3} width="200"/><br/>            |

El **descriptor de icono** sirve para clarificar la acción o el nombre de un botón o un icono interactivo. El descriptor se muestra cuando el usuario pasa por encima del icono correspondiente.

El **descriptor de definición** sirve para definir un término o proveer información adicional de un elemento. Se puede usar en términos tanto de etiquetas de componentes como dentro de párrafos de texto. Se recomienda que el texto descriptivo sea breve y claro. Al igual que en el caso anterior el descriptor se muestra cuando el usuario pasa por encima del texto correspondiente.

Por último el **descriptor interactivo** es más complejo desde el punto de vista de contenido, dado que puede contener texto rico y elementos interactivos como botones o enlaces. No se recomienda abusar de este tipo de componente dado que puede conducir a que el usuario no interactúe adecundamente con el producto.

Al contrario que los anteriores, para mostrarse se requiere que el usuario pulse en el icono representativo y se mantienen abiertos hasta que el usuario pulsa en alguno de sus elementos o en el exterior del mismo.

### Contenido

En general, al ser un elemento de tamaño reducido se recomienda que los textos contenidos en el descriptor sean breves y claros.

En el caso concreto del descriptor de icono se recomienda que el texto de la descripción sea muy breve, preferiblemente una palabra que indique de manera directa el efecto de interactuar con el icono.

### Anatomía

La anatomía de los tres tipos es similar en líneas generales, aunque difiere en los espaciados del interior del descriptor dependiendo del contenido. Así, mientras las distancias entre los elementos descritos y el descriptor mantienen el espaciado tipo de 8px, las tipografías y colores son los mismos, es decir, textos de tipo estándar Lato de 16px regular, y color blanco sobre fondo oscuro, siendo el espaciado variable para el contenido.

El descriptor de icono que toma de referencia espaciados pequeños inferiores a la unidad de 8px, el descriptor de definición maneja la referencia de espaciados estándar de 8px y el descriptor interactivo emplea un espaciado mayor de 16px.

| <br/><img src={image4} width="200"/><br/>  | <br/><img src={image5} width="300"/><br/>  | <br/><img src={image6} width="300"/><br/>  |
| :---------------------: | :--------------------------: | :------------------------------------: |

### Posición


Los descriptores pueden posicionarse bien encima, debajo, a la izquierda o a la derecha del elemento descrito. Asimismo, el descriptor posicionado encima o debajo puede estar alineado al inicio, al centro o al fin del elemento.

| **Encima y alineado al inicio**            | **Encima y alineado al centro**            | **Encima y alineado al fin**               |
| :---------------------------------------:- | :----------------------------------------: | :----------------------------------------: |
| <br/><img src={image7} width="90"/><br/>  | <br/><img src={image8} width="90"/><br/>  | <br/><img src={image9} width="90"/><br/>  |
| **A la izquierda**                         |                                            | **A la derecha**                           |
| <br/><img src={image10} width="125"/><br/>  |                                            | <br/><img src={image11} width="125"/><br/>  |
| **Debajo y alineado al inicio**            | **Debajo y alineado al centro**            | **Debajo y alineado al fin**               |
| <br/><img src={image12} width="90"/><br/>  | <br/><img src={image13} width="90"/><br/>  | <br/><img src={image14} width="90"/><br/>  |

Es importante señalar que el posicionamiento a la izquierda y a la derecha no debe ser empleado para el descriptor de definición cuando se encuentre en el interior de un párrafo, para evitar que la descripción pueda tapar información importante alrededor de la palabra descrita.

### Comportamiento

Por defecto el descriptor se encuentra oculto y se muestra cuando el usuario se situa sobre el elemento descrito para el caso de descriptores de icono y de definición, esto es en los estados hover y focus de este tipo de descriptores, o cuando el usuario clica en el elemento descrito para los descriptores interactivos, esto es en el estado open.

El descriptor se oculta otra vez cuando se recupera el estado enabled, esto es al perder el hover o focus para los primeros descriptores, o cuando se ejecuta alguna de las interacciones o se clica fuera del elemento en el caso del descriptor interactivo.


#### Código

```
<tooltip></tooltip>
```

#### Tokens

**Color de descriptor de icono**

| Class                       | Property         | Color token   |
| :-------------------------- | :--------------- | :------------ |
| `.bx--tooltip__trigger svg` | background-color | `$inverse-02` |
| `.bx--tooltip--icon`        | background-color | `$inverse-02` |
| `p`                         | text color       | `$inverse-01` |

**Color de descriptor de definición**

| Class                      | Property         | Color token       |
| :------------------------- | :--------------- | :---------------- |
| `.bx--tooltip__label`      | text color       | `$text-02`        |
| `.bx--tooltip__trigger`    | border-bottom    | `$interactive-04` |
| `.bx--tooltip--definition` | background-color | `$inverse-02`     |
| `p`                        | text color       | `$inverse-01`     |

**Color de descriptor interactivo**

| Class                   | Property         | Color token   |
| :---------------------- | :--------------- | :------------ |
| `.bx--tooltip__label`   | text color       | `$text-02`    |
| `.bx--tooltip__trigger` | svg              | `$icon-01`    |
| `.bx--tooltip--shown`   | background-color | `$inverse-02` |
| `.bx--tooltip__caret`   | background-color | `$inverse-02` |
| `p`                     | text color       | `$inverse-01` |

**Tipografía**

| Property              | Type token       |
| :-------------------- | :--------------- |
| `.bx--tooltip__label` | `$label-01`      |
| `p`                   | `$body-short-01` |

**Espaciado del descriptor de icono**

| Class                                                        | Property                    | Spacing token |
| :----------------------------------------------------------- | :-------------------------- | :------------ |
| `.bx--tooltip--icon__top:before` `.bx--tooltip--icon__bottom:before` | max-width                   | –             |
| `.bx--tooltip--icon__top:before` `.bx--tooltip--icon__bottom:before` | padding-left, padding-right | `$spacing-05` |
| `.bx--tooltip--icon__top:before` `.bx--tooltip--icon__bottom:before` | padding-top, padding-bottom | `$spacing-01` |
| `.bx--tooltip__caret`                                        | margin-top                  | `$spacing-03` |

**Espaciado del descriptor de definición**

| Class                                                        | Property                    | Spacing token |
| :----------------------------------------------------------- | :-------------------------- | :------------ |
| `.bx--tooltip--definition__bottom` `.bx--tooltip--definition__top` | max-width                   | –             |
| `.bx--tooltip--definition__bottom` `.bx--tooltip--definition__top` | padding-top, padding bottom | `$spacing-03` |
| `.bx--tooltip--definition__bottom` `.bx--tooltip--definition__top` | padding-left, padding-right | `$spacing-05` |
| `.bx--tooltip__trigger`                                      | border-bottom               | –             |
| `.bx--tooltip__caret`                                        | margin-top                  | `$spacing-02` |

**Espaciado del descriptor interactivo**

| Class                       | Property      | Spacing token |
| :-------------------------- | :------------ | :------------ |
| `.bx--tooltip`              | max-width     | `-`           |
| `.bx--tooltip__trigger svg` | height, width | `-`           |
| `.bx--tooltip__trigger`     | margin-left   | `$spacing-03` |
| `.bx--tooltip--shown`       | padding       | `$spacing-05` |
| `.bx--tooltip`              | margin-top    | `$spacing-03` |